<template>
	<!-- 工程案例 -->
	<div id="cases" class="bg3e8">
		<div class="w1200">
			<home-title :length="length"></home-title>
		</div>
		<div class="swiper-demo">
			<div class="cases swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide" v-for="(item, index) in cases" :key="index">
						<div class="swiper-slide-details">
							<img :src="item.img" alt="" />
							<div class="title">{{ item.title }}</div>
						</div>
					</div>
				</div>
				<!-- <div class="swiper-pagination"></div>
				<div class="swiper-button-prev swiper-cases-prev"></div>
				<div class="swiper-button-next swiper-cases-next"></div>
				<div class="swiper-scrollbar"></div> -->
			</div>
		</div>
	</div>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
import HomeTitle from '@/components/HomeTitle'

export default {
	name: 'Homecases',
	// import引入的组件需要注入到对象中才能使用
	components: {HomeTitle},
	props: {
		cases: {}
	},
	data() {
		// 这里存放数据
		return {length: 3}
	},
	computed: {}, // 计算属性 类似于data概念
	watch: {}, // 监控data中的数据变化
	methods: {}, // 方法集合
	created() {}, // 生命周期 - 创建完成（可以访问当前this实例）
	mounted() {
		// eslint-disable-next-line no-new
		new Swiper('.cases', {
			loop: true, // 循环模式选项
			slidesPerView: 4,
			// spaceBetween: 30,
			pagination: {
				el: '.swiper-pagination'
			},
			// 如果需要前进后退按钮
			navigation: {
				nextEl: '.swiper-cases-next',
				prevEl: '.swiper-cases-prev'
			},
			autoplay: true
		})
	}, // 生命周期 - 挂载完成（可以访问DOM元素）
	beforeCreate() {}, // 生命周期 - 创建之前
	beforeMount() {}, // 生命周期 - 挂载之前
	beforeUpdate() {}, // 生命周期 - 更新之前
	updated() {}, // 生命周期 - 更新之后
	beforeDestroy() {}, // 生命周期 - 销毁之前
	destroyed() {}, // 生命周期 - 销毁完成
	activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
#cases {
	width: 100%;

	.w1200 {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.swiper-demo {
		margin: 0 auto;
		animation: example2 3s ease-out 1s backwards;
		.cases {
			width: 1200px;
			padding: 0 0 50px;
			.swiper-slide {
				width: 300px;
				.swiper-slide-details {
					width: 290px;
					padding: 0 5px;
					img {
						width: 100%;
						height: 195px;
					}
					.title {
						width: 100%;
						height: 40px;
						margin: 5px 0 0;
						line-height: 40px;
						text-align: center;
						font-size: 15px;
						background-color: white;
						overflow: hidden;
						text-overflow: ellipsis; /* 超出部分省略号 */
						word-break: break-all; /* break-all(允许在单词内换行。) */
						display: -webkit-box; /* 对象作为伸缩盒子模型显示 */
						-webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
						-webkit-line-clamp: 1; /* 显示的行数 */
					}
				}
				// padding: 0 5px;
			}
			.swiper-pagination {
				.swiper-pagination-bullet {
					width: 100px !important;
					height: 8px;
					display: inline-block;
					border-radius: 2px;
				}
			}
		}
	}
	.swiper-scrollbar {
		display: none;
	}
}
</style>
